<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix" style="text-align: left">
        <span style="font-size: 25px">我的账户</span>
      </div>
      <div class="text item" style="text-align: left">
        {{ '账户 :' }}{{ user.nickName }}<br><br>
        {{ '身份证 :' }}{{ user.idcard }}<br><br>
        {{ '手机号 :' }}{{ user.phone }}<br><br>
        {{ '余额 :' }}{{ user.money }}<br><br>
        <button style="width: 50px;height:32px;color: #29d074;background-color: #e5f8ef;border: #a0e9c1 1px solid"
                @click="topUp">充值
        </button>
        <el-button style="margin-left: 10px;color: #1485ee;background-color: #99c6ff;border: #5568a0 1px solid"
                   type="small" @click="openWithDraw">提现
        </el-button>
        <el-button style="margin-left: 10px;color: #ce69e6;background-color: #d5bfeb;border: #662592 1px solid"
                   type="small" @click="openTransferMyFriend">转账给我的好友
        </el-button>
        <el-button style="margin-left: 10px;color: #f12264;background-color: #ffb8b8;border: #f0628b 1px solid"
                   type="small" @click="MyCards">我的卡包
        </el-button>
      </div>
      <div style="width: 520px;height: 600px;">
        <el-dialog :visible.sync="dialogTableVisible2" title="我的卡包">
          <el-table :data="gridData">
            <el-table-column label="用户名" property="uname" width="100"></el-table-column>
            <el-table-column label="银行余额" property="balance" width="100"></el-table-column>
            <el-table-column label="银行卡类型" property="bname" width="130"></el-table-column>
            <el-table-column label="银行卡账户" property="bankAccount" width="150"></el-table-column>
            <el-table-column label="今日剩余充值额度" property="transferLimit" width="150"></el-table-column>
          </el-table>
        </el-dialog>

        <el-dialog :visible.sync="dialogFormVisible3" title="充值">
          <el-form :model="form3">
            <el-form-item :label-width="formLabelWidth" label="充值方式">
              <el-select v-model="form3.payerBankid" placeholder="请选择充值方式">
                <el-option v-for="b in bankTypes" :key="b.id" :label="b.bname" :value="b.id"
                >{{ b.bname }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="银行卡号">
              <el-input v-model="form3.bankAccount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="充值金额">
              <el-input v-model="form3.transferAmount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="转账用途">
              <el-input v-model="form3.transferPurpose" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="goMoney">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogFormVisible4" title="提现">
          <el-form :model="form4">
            <el-form-item :label-width="formLabelWidth" label="提现类型">
              <el-select v-model="form4.payerBankid" placeholder="请选择银行卡">
                <el-option v-for="b in bankTypes" :key="b.id" :label="b.bname" :value="b.id"
                >{{ b.bname }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="银行卡号">
              <el-input v-model="form4.bankAccount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="提现金额">
              <el-input v-model="form4.transferAmount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="提现用途">
              <el-input v-model="form4.transferPurpose" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible4 = false">取 消</el-button>
            <el-button type="primary" @click="withDraw">确 定</el-button>
            <el-button style="margin-left: 10px;color: #4a4141;border: #ffffff 1px solid"
                       type="small" @click="allDraw">全部提现到银行卡
            </el-button>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogFormVisible5" title="选择好友转账">
          <el-form :model="form5">

            <el-form-item :label-width="formLabelWidth" label="请输入名称">
              <el-input v-model="form5.payeeName" autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="收款账号">
              <el-input v-model="form5.bankAccount" autocomplete="off" placeholder="请输入账号"></el-input>
            </el-form-item>

            <el-form-item :label-width="formLabelWidth" label="收款银行">
              <el-select v-model="form5.payerBankid" placeholder="请选择银行">
                <el-option v-for="b in bankTypes" :key="b.id" :label="b.bname" :value="b.id"
                >{{ b.bname }}
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item :label-width="formLabelWidth" label="转账金额">
              <el-input v-model="form5.transferAmount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="转账附言">
              <el-input v-model="form5.transferPostscript" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible5 = false">取 消</el-button>
            <el-button type="primary" @click="withDraw">确 定</el-button>
            <el-button style="margin-left: 10px;color: #4a4141;border: #ffffff 1px solid"
                       type="small" @click="transferMyFriend">转账给我的好友
            </el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
    <br>
  </div>

</template>

<script>
export default {
  name: "AccountView",
  data() {
    return {
      user: {},
      form: {},
      formLabelWidth: '100px',
      dialogTableVisible2: false,
      gridData: [],
      bankTypes: [],
      dialogFormVisible3: false,
      form3: {},
      dialogFormVisible4: false,
      form4: {},
      dialogFormVisible5: false,
      form5: {},
    }
  }, methods: {
    openTransferMyFriend() {
      this.dialogFormVisible5 = true;
      this.form5 = {};
    },
    transferMyFriend() {
      this.axios.post("/userservice/account/transferMyFriend", this.form5).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.dialogFormVisible5 = false;
          this.getUserById();
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    allDraw() {
      this.form4 = {transferAmount: this.user.money};
      this.form4.transferAmount = this.user.money;
      alert("我的现金余额为：" + this.form4.transferAmount);
    },
    getBankTypes() {
      this.axios.post("/userservice/bank/bankType").then(res => {
        this.bankTypes = res.data.data;
      })
    },
    openWithDraw() {
      this.dialogFormVisible4 = true;
      this.form4 = {};
    },
    withDraw() {
      this.axios.post("/userservice/account/withDraw", this.form4).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.dialogFormVisible4 = false;
          this.getUserById();
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    MyCards() {
      this.dialogTableVisible2 = true;
      let token = sessionStorage.getItem("token");
      this.axios.post("/userservice/bank/myBankCard?token=" + token).then(res => {
        this.gridData = res.data.data;
      })
    },
    getUserById() {
      let token = sessionStorage.getItem("token");
      this.axios.post("/userservice/account/list?token=" + token).then(res => {
        this.user = res.data.data;
      })
    },
    topUp() {
      this.dialogFormVisible3 = true;
      this.form3 = {};
    },
    goMoney() {
      this.axios.post("/userservice/account/topUp", this.form3).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.dialogFormVisible3 = false;
          this.getUserById();
        } else {
          this.$message.error(res.data.msg);
        }
      })
    }

  }, created() {
    //4.钩子函数
    this.getUserById();
    this.getBankTypes();
  }
}

// 计算下一次凌晨 0 点的时间
function calculateNextRefreshTime() {

  let now = new Date();
  let targetHour = 10;
  let targetMinute = 42;
  let targetSecond = 0;

  let nextRefreshTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), targetHour, targetMinute, targetSecond);
  nextRefreshTime = nextRefreshTime.toLocaleDateString('zh-CN');

  if (now > nextRefreshTime) {
    nextRefreshTime.setDate(nextRefreshTime.getDate() + 1);
  }
  return nextRefreshTime;
}

// 执行定时发送请求
function startSendingRequest() {

  let nextRefreshTime = calculateNextRefreshTime();
  let timeDifference = nextRefreshTime - new Date();

  setTimeout(() => {

    // 使用 XMLHttpRequest 或 fetch 发送请求
    fetch('http://localhost:10010/userservice/account/seLimit')
        .then(response => response.json())
        .then(data => {
          location.reload();
          // 处理后端返回的数据
          console.log(data);
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });

  }, timeDifference);
}

startSendingRequest();
</script>

<style scoped>

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 380px;
}

</style>
